<template>
  <div id="app">
    <StyleEditor ref="styleEditor" :code="currentStyle"></StyleEditor>
    <ResumeEditor ref="resumeEditor" :markdown="currentMarkdown" :enableHtml="enableHtml"></ResumeEditor>
  </div>
</template>

<script>
  import StyleEditor from './components/StyleEditor'
  import ResumeEditor from './components/ResumeEditor'
  import './assets/reset.css'

  export default {
    name: 'app',
    components: {
      StyleEditor,
      ResumeEditor
    },
    data() {
      return {
        photo:require('50368334.jpg') , 
        interval: 35,
        currentStyle: '',
        enableHtml: false,
        fullStyle: [
          `/*
* Hi! 大家好，我是俞健
* 来公司大半年了，课长最近找我聊,说有些同事对我还不是很了解，你应该准备份简历介绍下自己。
* 说做就做，我也来写一份简历！
*/

/* 应该怎麼写呢? 首先给所有元素加上过渡效果吧 */
* {
  transition: all .3s;
}
/* 白色背景太单调了，来点背景看上去应该会比较酷 */
html {
  color: rgb(222,222,222); background: rgb(0,43,54);
}
/* 看起來文字离边框太近了 */
.styleEditor {
  padding: .5em;
  border: 1px solid;
  margin: .5em;
  overflow: auto;
  width: 45vw; height: 90vh;
}
/* 我想现在是不是应该给代码加点颜色呢? */
.token.selector{ color: rgb(133,153,0); }
.token.property{ color: rgb(187,137,0); }
.token.punctuation{ color: yellow; }
.token.function{ color: rgb(42,161,152); }

/* 再加点 3D 效果吧,这样一定会让别人觉得很酷炫的 */
html{
  perspective: 1000px;
}
.styleEditor {
  position: fixed; left: 0; top: 0;
  -webkit-transition: none;
  transition: none;
  -webkit-transform: rotateY(10deg) translateZ(-100px) ;
          transform: rotateY(10deg) translateZ(-100px) ;
}

/* 把写代码的样子给同事看,他们应该会感受到我这份诚意的,
 * 好了接下来我给自己准备一个编辑器 
 */
.resumeEditor{
  position: fixed; right: 0; top: 0;
  padding: .5em;  margin: .5em;
  width: 48vw; height: 90vh;
  border: 1px solid;
  background: white; color: #222;
  overflow: auto;
}
/* 好了，我要开始写简历了 */


`,
          `
/* 这个简历好像差点什么
 * 对了，这是 Markdown 格式的，我需要把这些内容变成对同事更友好的格式
 * 简单，用开源的工具翻译成 HTML 就好了
 */
`
          ,
          `
/* 好像还是很丑,再对它加点样式吧 */
.resumeEditor{
  padding: 2em;
}
/* 标题与正文之间好像太紧凑了 */
.resumeEditor h2{
  display: inline-block;
  border-bottom: 1px solid;
  margin: 1em 0 .5em;
}

.resumeEditor ul,.resumeEditor ol{
  list-style: none;
}

/* 列表前面的符号与数字好像挨得太紧了 */
.resumeEditor ul> li::before{
  content: '•';
  margin-right: .5em;
}

.resumeEditor ol {
  counter-reset: section;
}
.resumeEditor ol li::before {
  counter-increment: section;
  content: counters(section, ".") " ";
  margin-right: .5em;
}
/* 最后我是不是应该把这段引用IT界的格言给它加上个底色.这样就完美了 */
.resumeEditor blockquote {
  margin: 1em;
  padding: .5em;
  background: #ddd;
}

/* 好像還是缺了點什麽...課長提醒了我,你應該加張帥氣的照片,讓同事加深對你的印象! 
 * 好吧我翻了一下自己以前拍的照片,那就選這張吧!
 */
`,`
/* 以上就是我的個人簡介,希望今后能與同事合作愉快... 謝謝 */
`],
        currentMarkdown: '',
        MarkdownList:[`
# 俞健 / Yu Jian
        `,`
## IT民工 / Senior Development Engineer

* 📞 13616880703
* 📧 snake19840@126.com
* 🌈 https://gitee.com/yujian19840

## 👨‍💻 关于我 About me

* 喜欢专研新技术,动手试一试
* 喜欢写代码,旅游,摄影,游戏... 

> * 我喜歡的格言是:
> * 优美胜于丑陋 (Python 以编写优美的代码为目标) 
> * 明了胜于晦涩 (优美的代码应当是明了的,命名规范,风格相似) 
> * 简洁胜于复杂 (优美的代码应当是简洁,不要有复杂的内部实现) 
> * 复杂胜于凌乱 (如果复杂不可避免,代码也不能有难懂的关系,要保持接口简洁) 
> * 扁平胜于嵌套 (优美的代码应当是扁平的,不能有太多的嵌套) 
> * 间隔胜于紧凑 (优美的代码有适当的间隔,不要奢望一行代码解决问题) 
> * 可读性很重要 (优美的代码是可读的) 
> * 即使假借特例的实用性之名,也不可违背这些规则 (这些规则至高无上)

## 🎓 教育 Education

- 浙江大学宁波理工学院
    - 电子信息工程 (2003.9~2007.6)

## 🔧 技能 Skill

- 1 Python用户,经常用Python写一些小工具或研究leetcode的算法题目
- 2 Linux-kali 经常使用kali研究CTF的题目与网络渗透技术
- 3 在熟悉JS语言的基础上熟练掌握目前最流行的前端框架Vue.js
- 4 可能熟练使用后端语言C#,JAVA,SQL搭建与使用MVC框架
- 5 熟练掌握docker技术,快速部署虚拟开发环境
- 6 熟练掌握Ngnix反向代理技术与动态均衡技术
- 7 熟悉redis分布式缓存管理技术

## 🏗 工作经历 Work experience

 1. 2007.3~2018.7 中国移动宁波分公司  负责移动公司传输网络建设
 2. 2018.7-2020-12 中国电信宁波分公司 企业信息化中心机房管理工作
 3. 2020.12-至今 群创光电股份有限公司 出货品质管理软件开发与维护工作
`],
        fullMarkdown: ''
      }
    
    },
    created() {
      this.makeResume()
    },

    methods: {
      makeResume: async function () {
        await this.progressivelyShowStyle(0)
        await this.progressivelyShowResume()
        await this.progressivelyShowStyle(1)
        await this.showHtml()
        await this.progressivelyShowStyle(2)
        await this.showPhoto()
        await this.progressivelyShowStyle(3)
      },
      showPhoto(){
        this.currentMarkdown=this.MarkdownList[0]+
        `
<div style="text-align: left;"><img src="public/static/aa.jpg" alt="50368334" style="zoom: 9%;" /></div>`+
this.MarkdownList[1]

      },
      showHtml: function () {
        return new Promise((resolve, reject) => {
          this.enableHtml = true
          resolve()
        })
      },
      progressivelyShowStyle(n) {
        return new Promise((resolve, reject) => {
          let interval = this.interval
          let showStyle = (async function () {
            let style = this.fullStyle[n]
            if (!style) { return }
            // 计算前 n 个 style 的字符总数
            let length = this.fullStyle.filter((_, index) => index <= n).map((item) => item.length).reduce((p, c) => p + c, 0)
            let prefixLength = length - style.length
            if (this.currentStyle.length < length) {
              let l = this.currentStyle.length - prefixLength
              let char = style.substring(l, l + 1) || ' '
              this.currentStyle += char
              if (style.substring(l - 1, l) === '\n' && this.$refs.styleEditor) {
                this.$nextTick(() => {
                  this.$refs.styleEditor.goBottom()
                })
              }
              setTimeout(showStyle, interval)
            } else {
              resolve()
            }
          }).bind(this)
          showStyle()
        })
      },
      progressivelyShowResume() {
        return new Promise((resolve, reject) => {
          this.fullMarkdown=this.MarkdownList[0]+this.MarkdownList[1]
          let length = this.fullMarkdown.length
          let interval = this.interval
          let showResume = () => {
            if (this.currentMarkdown.length < length) {
              this.currentMarkdown = this.fullMarkdown.substring(0, this.currentMarkdown.length + 1)
              let lastChar = this.currentMarkdown[this.currentMarkdown.length - 1]
              let prevChar = this.currentMarkdown[this.currentMarkdown.length - 2]
              if (prevChar === '\n' && this.$refs.resumeEditor) {
                this.$nextTick(() => this.$refs.resumeEditor.goBottom())
              }
              setTimeout(showResume, interval)
            } else {
              resolve()
            }
          }
          showResume()
        })
      },

    }
  }

</script>

<style scoped>
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  html {
    min-height: 100vh;
  }
  *{
    box-sizing: border-box;
  }
</style>
